<cly-drawer
    @submit="onSubmit"
    @copy="onCopy"
    @close="onClose"
    :title="title"
    :saveButtonLabel="saveButtonLabel"
    v-bind="controls">
    <template v-slot:default="drawerScope">
        <cly-form-step id="dashboards-drawer">
            <cly-form-field :label="i18n('dashboards.dashboard-name')" name="name" rules="required" v-slot:default>
                <el-input
                    v-model="drawerScope.editedObject.name"
                    :placeholder="i18n('placeholder.dashboards.dashboard-name')">
                </el-input>
            </cly-form-field>
            <div class="text-big font-weight-bold">
                {{i18n('dashboards.share-with')}}
                <cly-tooltip-icon tooltip="Select the dashboard sharing option"></cly-tooltip-icon>
            </div>
            <cly-form-field name="share_with" rules="required">
                <el-radio-group :disabled="!canShare" v-model="drawerScope.editedObject.share_with" style="width: 100%;">
                    <el-radio
                        border
                        class="is-autosized-vstack"
                        v-for="(item) in constants.sharingOptions"
                        :label="item.value"
                        :key="item.value">
                        <div>
                            {{item.name}}
                        </div>
                        <div class="text-small color-cool-gray-50">
                            {{item.description}}
                        </div>
                    </el-radio>
                </el-radio-group>
            </cly-form-field>

          
            <div v-if="drawerScope.editedObject.share_with === 'selected-users'">
                <div class="text-big font-weight-bold">
                    {{i18n('dashboards.user-permissions')}}
                    <cly-tooltip-icon tooltip="Set the User permissions"></cly-tooltip-icon>
                </div>
                <cly-form-field :label="i18n('dashboards.users-edit-permission')" :subheading="i18n('dashboards.users-edit-description')">
                    <cly-select-email :disabled="!canShare" v-model="sharedEmailEdit" :placeholder="canShare ? i18n('dashboards.enter-user-email') : i18n('dashbaords.sharing-disabled')"></cly-select-email>
                </cly-form-field>
                <cly-form-field :label="i18n('dashboards.users-view-permission')" :subheading="i18n('dashboards.users-view-description')">
                    <cly-select-email :disabled="!canShare" v-model="sharedEmailView" :placeholder="canShare ? i18n('dashboards.enter-user-email') : i18n('dashbaords.sharing-disabled')"></cly-select-email>
                </cly-form-field>
            </div>

            <div v-if="(drawerScope.editedObject.share_with === 'selected-users') && groupSharingAllowed">
                <div class="text-big font-weight-bold">
                    {{i18n('dashboards.user-group-permission')}}
                    <cly-tooltip-icon tooltip="Set the User group permissions"></cly-tooltip-icon>
                </div>
                <cly-form-field
                    name="shared_user_groups_edit"
                    :label="i18n('dashboards.users-edit-permission')"
                    :subheading="i18n('dashboards.users-edit-description')">
                    <el-select
                        :key="elSelectKey"
                        multiple
                        :disabled="!canShare"
                        v-model="sharedGroupEdit"
                        :placeholder="canShare ? i18n('placeholder.dashboards.select-user-group') : i18n('dashbaords.sharing-disabled')"
                        style="width: 100%;">
                        <el-option
                            v-for="(item) in allGroups"
                            :value="item.value"
                            :label="item.name"
                            :key="item.value">
                        </el-option>
                    </el-select>
                </cly-form-field>
                <cly-form-field
                    name="shared_user_groups_view"
                    :label="i18n('dashboards.users-view-permission')"
                    :subheading="i18n('dashboards.users-view-description')">
                    <el-select
                        :key="elSelectKey"
                        multiple
                        :disabled="!canShare"
                        v-model="sharedGroupView"
                        :placeholder="canShare ? i18n('placeholder.dashboards.select-user-group') : i18n('dashbaords.sharing-disabled')"
                        style="width: 100%;">
                        <el-option
                            v-for="(item) in allGroups"
                            :value="item.value"
                            :label="item.name"
                            :key="item.value">
                        </el-option>
                    </el-select>
                </cly-form-field>
            </div>

            <div class="text-big font-weight-bold bu-mt-4">
                {{i18n('dashboards.additional-settings')}}
            </div>
            <cly-form-field name="send-email">
                <el-checkbox v-model="drawerScope.editedObject.send_email_invitation">{{i18n('dashboards.send-email')}}</el-checkbox>
            </cly-form-field>

        </cly-form-step>
    </template>
</cly-drawer>